// 从Vue核心库中导入createApp函数，用于创建Vue应用实例
// createApp: 创建Vue应用实例的函数，是Vue 3的新特性
import { createApp } from 'vue'

// 从Pinia状态管理库中导入createPinia函数，用于创建状态存储实例
// createPinia: 创建Pinia状态管理实例的函数，Pinia是Vue 3推荐的状态管理库
import { createPinia } from 'pinia'

// 导入Element Plus UI组件库及其样式文件
// ElementPlus: Element Plus UI组件库，基于Vue 3的桌面端组件库
import ElementPlus from 'element-plus'
// 导入Element Plus的CSS样式文件
import 'element-plus/dist/index.css'
// 导入Element Plus的中文语言包，用于国际化
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 导入打印插件，用于实现页面打印功能
import { hiPrintPlugin } from "vue-plugin-hiprint";

// 导入Element Plus图标
// ElementPlusIconsVue: Element Plus图标组件集合，包含丰富的SVG图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 导入根组件App.vue
// App: 根组件，是整个Vue应用的入口组件
import App from './App.vue'

// 导入路由配置文件
// router: Vue Router实例，用于管理应用的路由
import router from './router'

// 动态引入打印样式表，仅在打印时应用
// 创建link元素用于引入打印样式
const printLink = document.createElement('link')
printLink.rel = 'stylesheet'
printLink.href = '/print-lock.css'
printLink.media = 'print'
// 将link元素添加到head中，实现打印样式与普通样式的分离
document.head.appendChild(printLink)

// 创建Vue应用实例
// app: Vue应用实例对象，是Vue 3应用的根实例
const app = createApp(App)

// 注册Pinia状态管理插件
// 用于管理应用的全局状态，Pinia相比Vuex更简洁易用
app.use(createPinia())

// 注册Vue Router路由插件
// 用于实现页面路由和导航，管理不同页面之间的跳转
app.use(router)

// 注册打印插件
// hiPrintPlugin: 打印插件实例
// "hiprint": 插件名称，可自定义
app.use(hiPrintPlugin, "hiprint");
// 禁用自动连接，需要时手动连接
hiPrintPlugin.disAutoConnect();

// 注册Element Plus UI组件库插件，并配置中文语言包
// 用于在应用中使用Element Plus组件，提升开发效率
app.use(ElementPlus, {
  locale: zhCn, // 配置中文语言包
})

// 自动注册Element Plus图标组件
// 遍历所有图标组件并全局注册，方便在模板中直接使用
// key: 图标名称
// component: 图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  // 将图标组件注册为全局组件
  // key: 组件名称
  // component: 组件对象
  app.component(key, component)
}

// 挂载Vue应用到DOM元素（id为app的元素）
// 将Vue应用实例挂载到HTML中的<div id="app"></div>元素上
// 这是Vue应用真正开始运行的起点
app.mount('#app')
